<section class="content-header">
  <h1 style="text-align:center;"><strong>审批记录</strong></h1>
</section>
<div><br><br></div>
<div class="box">
  <div class="box-header">
    <div class="box-tools">
    </div>
  </div>
  <!-- /.box-header -->
  <div class="box-body table-responsive no-padding">
    <table class="table table-hover">
      <tr><br><br></tr>
      <tr>
        <th>记录编号</th>
        <th>请假类型</th>
        <th>处理时间</th>
        <th>处理结果</th>
        <th>审批建议</th>
      </tr>
      <tr *ngFor="let deal of departmentManagerDeal" class="toDetail" (click)="lookDetail(deal.request_id, deal.request_type)">
        <td>{{deal.id}}</td>
        <td><span class="badge bg-blue">{{getType(deal.request_type)}}</span></td>
        <td>{{deal.approval_time}}</td>
        <td>{{getState(deal.state)}}</td>
        <td>{{deal.suggestion}}</td>
      </tr>
      <tr *ngFor="let deal2 of deputyManagerDeal" class="toDetail" (click)="lookDetail(deal2.request_id, deal2.request_type)">
        <td>{{deal2.id}}</td>
        <td><span class="badge bg-blue">{{getType(deal2.request_type)}}</span></td>
        <td>{{deal2.approval_time}}</td>
        <td>{{getState(deal2.state)}}</td>
        <td>{{deal2.suggestion}}</td>
      </tr>
      <tr *ngFor="let deal3 of mainManagerDeal" class="toDetail" (click)="lookDetail(deal3.request_id, deal3.request_type)">
        <td>{{deal3.id}}</td>
        <td><span class="badge bg-blue">{{getType(deal3.request_type)}}</span></td>
        <td>{{deal3.approval_time}}</td>
        <td>{{getState(deal3.state)}}</td>
        <td>{{deal3.suggestion}}</td>
      </tr>
    </table>
  </div>
  <!-- /.box-body -->
</div>
<!-- /.box -->
<div id="popup" *ngIf="detail" (click)="backDetail()">
  <div class="bg">
    <div class="box box-primary" style="float:left;width: 55%;margin-left:25%;margin-top: 5%;text-align: center">
      <div class="box-body box-profile">
        <h3 class="profile-username text-center">{{user.name}}</h3>

        <p class="text-muted text-center">部门：{{user.department}}&nbsp;&nbsp;&nbsp;职位：{{user.position}}&nbsp;&nbsp;&nbsp;员工ID：{{user.id}}</p>

        <ul class="list-group list-group-unbordered">
          <div>
            <li class="list-group-item">
              <b>{{leave.duration}}</b> <b>{{out.duration}}</b> <a class="pull-left">请假时长</a>
            </li>
          </div>
          <div>
            <li class="list-group-item">
                <a class="pull-left">请假原因</a><br>
              <b>{{leave.reason}}</b> <b>{{out.reason}}</b>
            </li>
          </div>
          <div>
            <li class="list-group-item">
              <b>{{leave.start_time}}</b> <b>{{out.start_time}}</b> <a class="pull-left">开始时间</a>
            </li>
          </div>
          <div>
            <li class="list-group-item">
              <b>{{leave.end_time}}</b> <b>{{out.end_time}}</b> <a class="pull-left">结束时间</a>
            </li>
          </div>
          <div>
            <li class="list-group-item">
              <b>{{getState(leave.state)}}</b> <b>{{getState(out.state)}}</b> <a class="pull-left">审批状态</a>
            </li>
          </div>

          <div style="white-space: pre-line;">
            <li class="list-group-item">
              <a class="pull-left">当前建议</a>
              <div>
                <textarea class="textarea" readonly="readonly" style="width: 90%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
                    {{leave.suggestion}}
                    {{out.suggestion}}
                </textarea>
              </div>
              
            </li>
          </div>



        </ul>
      </div>
    </div>
  </div>